<template lang="">
  <div class="page" style="height: height;">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="top">
      <span class="left">当前定位城市：</span>
      <span class="right">定位不准时，请再城市列表选择</span>
    </div>
    <hr>
    <div class="guessCity" @click="clickAction(guess.name,guess.id)">
      <span class="leftGuess">{{guess.name}}</span>
      <i class="iconfont icon-jiantou"></i>
    </div>
    <div class="hotCity">
      <p>热门城市</p>
      <ul>
        <li v-for="(item,index) in hot" :key="index" @click="clickAction(item.name,item.id)" class="onecity">
          {{item.name}}</li>
      </ul>
    </div>
    <div class="groupCity">
      <div v-for="(item,index1) in zimu" :key="index1">
        <div class="zimupaixu">
          <span>
            {{item}}
          </span>
          <span>
            (按字母排序)
          </span>
        </div>
        <ul>
          <li v-for="(items,index1) in group[item]" @click="clickAction(items.name,items.id)" :key="index1">
            {{items.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import Nav from "@/components/Nav.vue";
  export default {
    name: "HomeFirst",
    data() {
      return {
        height: this.$height + 44,
        left_show: false,
        left_name: "1",
        right_name: "登录",
        title_name: "",
        nar_show: true,
        guess: [],
        group: [],
        hot: '',
        item: "",
        zimu: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
          'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      }
    },
    created() {
      if (localStorage.getItem("name")) {
        this.right_name = "头像";
      } else {
        this.right_name = "登录";
      }
      const request1 = this.axios.get("https://elm.cangdu.org/v1/cities?type=guess");
      const request2 = this.axios.get("https://elm.cangdu.org/v1/cities?type=hot");
      const request3 = this.axios.get("https://elm.cangdu.org/v1/cities?type=group");
      this.axios.all([request1, request2, request3]).then(this.axios.spread((res1, res2, res3) => {
        this.guess = res1.data;
        this.hot = res2.data;
        this.group = res3.data;
      })).catch((err) => {
        console.log(err)
      })
    },
    methods: {
      clickAction(name, index) {
        this.$router.replace({ name: 'nearly', params: { id: index } })
      }
    },
    components: {
      Nav,
    }
  }
</script>

<style lang="less" scoped>
  .page {
    background-color: rgb(245, 245, 245);
  }

  .top {
    width: 100%;
    padding: 15px 8px 8px;
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid gainsboro;
    background-color: white;
    margin-top: 44px;
  }

  .top .left {
    float: left;
    font-size: 13px;
    padding-left: 5px;
    color: rgb(99, 97, 97);
    margin-top: -3px;
  }

  .top .right {
    float: right;
    font-size: 12px;
    font-family: "黑体";
    color: rgb(167, 166, 166);
    margin-right: 15px;
  }

  .guessCity {
    overflow: hidden;
    background-color: white;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid gainsboro;
  }

  .guessCity .leftGuess {
    font-size: 16px;
    /*no*/
    color: #3190e8;
    line-height: 40px;
    float: left;
    padding-left: 15px;
    /*no*/

  }

  .icon-jiantou {
    float: right;
    font-size: 14px;
    /*no*/
    color: gray;
    line-height: 40px;
    margin-right: 8px;

  }

  .hotCity {
    margin-top: 10px;
    background-color: white;
    border: 1px solid gainsboro;

  }

  .onecity {
    border-right: 1px solid gainsboro;
  }

  .zimupaixu {
    border-top: 1px solid gainsboro;
    padding: 7px;
  }

  .zimupaixu span:nth-of-type(1) {
    padding: 8px;
    font-size: 14px;
    color: rgb(107, 107, 107);
  }

  .zimupaixu span:nth-of-type(2) {
    padding: 3px;
    font-size: 13px;
    color: rgb(126, 125, 125);
  }

  .hotCity p {
    padding: 8px;
    font-size: 13px;
    color: gray;
  }

  .hotCity .hotc {
    font-size: 14px;
    padding: 10px;
  }

  .hotCity .hotn {
    border-right: 1px solid #dcdcdc;
  }

  .hotCity ul {
    display: flex;
    justify-content: center;
    align-content: space-around;
    flex-wrap: wrap;
  }

  .hotCity li {
    width: 25%;
    border-top: 1px solid #ccc;
    /*no*/
    line-height: 45px;
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
    color: #3190e8;
  }

  .groupCity {
    margin-top: 10px;
    background-color: white;
  }

  .groupCity ul {
    display: flex;
    align-content: space-around;
    flex-wrap: wrap;
    border: 1px solid gainsboro;
  }

  .groupCity li {
    width: 25%;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    line-height: 40px;
    font-size: 15px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: gray;
  }

  .groupCity .zimu {
    font-size: 15px;
  }
</style>